<template>
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="user ? 20 : 24" :offset="0">
                    <el-menu style="width: 100%; height: 10vh;margin: 0 auto;" default-active="1" :ellipsis="false" mode="horizontal">
                        <el-avatar src="/imgs/login/logo.jpg" style="width: 8%;height: 10vh;"></el-avatar>
                        <el-menu-item index="1" @click="goIndex" style="width: 20%;">商城首页</el-menu-item>
                        <el-menu-item index="2" @click="goRecommended" style="width: 20%;">推荐</el-menu-item>
                        <el-menu-item index="3" @click="goExp" style="width: 20%;">购物车</el-menu-item>
                        <el-menu-item index="4" @click="goCulture" style="width: 20%;">文化</el-menu-item>
                        <el-menu-item index="5" @click="goUser" style="width: 20%;">我的</el-menu-item>
                        <el-menu-item index="6" v-if="!user" @click="gologin" style="width: 20%;">登录</el-menu-item>
                    </el-menu>
                </el-col>
                <el-col :span="user ? 4 : 0" :offset="0"  style="position: relative;overflow: hidden;">
                    <div style="position: absolute;right: 160px;top: 25px;width: 100px;">
                        <el-avatar v-if="user" :src="BASE_URL+user.avatarUrl" :fit="contain" :size="60"/>
                    </div>

                    <el-dropdown trigger="click" style="position: absolute;right: 70px;top: 40px;">
                        <span style="font-size: 19px;font-weight: bold;
                        white-space: nowrap;
                        overflow: hidden;
                        max-width: 200px;"
                        v-if="user"
                        >
                            {{ user.username }}
                            <el-icon>
                            <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <br>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script setup>
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from "vue-router";
import qs from 'qs';

const user=ref({});
onMounted(() => {
  user.value = getUser();
  // console.log(user.value);
})

const gologin = () => {
   router.push('/login')
}
const goIndex= ()=>{ router.push('/indexs')}
const goRecommended= ()=>{ router.push('/recommended')}
const goExp= ()=>{ router.push('/exp')}
const goCulture= ()=>{ router.push('/culture')}
const goUser= ()=>{ router.push('/user')}
const logout = () => {
    localStorage.removeItem('user');
    router.push('/login')
}
// //获取用户信息
// const getUserByName = async () => {
//     let data = qs.stringify(user.value);
//     axios.get(BASE_URL+'/v1/user/select'+data)
//     .then((response)=>{
//         if (response.data.code==2000){
//             user.value = response.data.data;
//             localStorage.setItem('user',JSON.stringify(user.value));
//         }
//     })

// }

// //获取一个路由对象
// const userrouter = useRouter()
// //监听路由变化
// userrouter.beforeEach((to, from,next) => {
//     if (to.path){
//         await getUserByName()
//         if (user.value.status === 1){
//             next()
//         }else{
//             ElMessage.error('账户被禁用')
//             localStorage.removeItem('user')
//             next('/login')
//         }
//     }
        
   
// })
</script>

<style>

</style>
